<template>
  <div id="upload-cp">
    <p>上传新视频：</p>
    <a href="javascript:;" class="file">选择文件
     <input type="file" :multiple="multiple" :accept="acceptType" id="uploadFile" @change="getFile($event)" />
    </a>
    <p v-if="isCount">选择了<span>{{file.length}}</span>个文件</p>
    <el-button class="uploadBtn"  @click="upload" type="primary">上传</el-button>
  </div>
</template>

<script>
/* eslint-disable */
import OSS from "ali-oss"
export default {
  name: "Upload",
  props:{
   // 是否支持多文件上传
   multiple:{
    type: Boolean,
    default: true
   },
   // 文件上传的个数限制
   limitCount:{
    type: Number,
    default: 1,
   },
   // 文件上传的接受的类型  video/* :视频类型， image/*：图片，根据需要判断
   acceptType:{
    type: String,
    default: 'video/*',
   },
   // 存放到 阿里云oss 对应的文件  video:视频， image: 图片， adjunct: 附件
   storeType:{
    type: String,
    default: 'video',
   }
  },
  data () {
    return {
      client: null,
      loading: null,
      file: null,
      isCount: false,
      disabled: false,
      minW: 5,             // 视频最小宽度
      maxW: 1000000,       // 视频最大宽度
      minH: 5,             // 视频最小长度      
      maxH: 100000,        // 视频最大长度
      minSize: 0.1,        // 视频文件最大值
      maxSize: 5000,       // 视频文件最小值
      minDurate: 0.1,      // 视频时长最小值
      maxDurate: 1000,     // 视频时长最大值
      fileInfo: {},     // 上传oss成功后的返回值
      videoLists: [],   // 创建视频
      videoSize: [],    // 视频大小
      videoRatio: [],   // 视频分辨率
      videoDurate: [],  // 视频时长
    }
  },
  created () {
    
  },
  mounted () {
    this.get("/admin/Config/get_oss", {}, "POST").then((e) => {
      console.log(e)
      this.client = new OSS({
      //region: 'oss-cn-shanghai',
      //accessKeyId: 'LTAI4GJx6odMGNveEcEiNu5X',
      //accessKeySecret: 'H6VKNcFktKwXpakucfYOpdgbfLPlhS',
      //bucket: 'maihai-h5zn',
      //secure: false
      region: 'oss-cn-'+e.regional,
      accessKeyId: e.AccessKeyID,
      accessKeySecret: e.AccessKeySecret,
      bucket: e.bucket,
      secure: false
      })
    });
  },
  methods: {
    // 开始动画
    startLoading () {
      this.loading = this.$loading({
        lock: true,
        text: '上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    // 结束动画
    endLoading(){
      this.loading.close()
    },
    // 获取文件路径
    getObjectURL (file) {
      let url = null
      if (window.createObjcectURL != undefined) {
        url = window.createOjcectURL(file)
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file)
      }
      return url
    },
    // 选择文件
    getFile (event) {
      this.disabled = false
      this.file = event.target.files
      for(let i = 0; i < this.file.length; i++){
        let video = document.createElement('video')
        video.setAttribute('controls', 'controls')
        video.setAttribute('src', this.getObjectURL(this.file[i]))
        this.videoLists.push(video)
        this.videoSize.push(this.file[i].size / 1024 / 1024)
      }
      this.isCount = true
    },
    // 随机
    random_string(len) {
        len = len || 32;
        let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz12345678', maxPos = chars.length, pwd = '';
        for (let i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    },
    // 日期
    getDate(){
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`
      let day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`
      return `${this.storeType}/${year}${month}${day}/`
    },
    // 上传
    upload () {
      if(!this.file) return this.$message.error('请选择上传文件')
      if(this.limitCount != this.file.length) return this.$message.error(`请上传${this.limitCount}个文件`)
	// 这样需要根据 上传文件的类型进行再一次的封装，因为我这是以视频上传为主。后续进行完善
      this.videoLists.map(item => {
        this.videoDurate.push(this.formatSeconds(item.duration))
        this.videoRatio.push({h:item.videoHeight,w:item.videoWidth})
      })
      // 判断视频大小
      let sizeBolean = this.videoSize.find((item) => {
        return item < this.minSize || item > this.maxSize
      })
      // 判断视频时长
      let durationBolean = this.videoDurate.find((item) => {
          return  item < this.minDurate || item > this.maxDurate
      })
      // 判断视频分辨率
      let raidoBolean = this.videoRatio.find((item) => {
         return item.w < this.minW || item.w > this.maxW
         if(this.minW < item.w && item.w > this.maxW) {
           return item.h < this.minH || item.w > this.maxH
         } 
      })
      if(sizeBolean) return this.$message.error('视频只能上传0.5M ~ 50M')
      if(durationBolean) return this.$message.error('视频时长只能上传1 ~ 10分钟')
      if(raidoBolean) return  this.$message.error('视频分辨率不合适')  
      this.disabled = true    
      this.submitFile()

    },
    //处理时间
    formatSeconds(value) { 
      var theTime = parseInt(value);// 需要转换的时间秒 
      var theTime1 = 0;// 分 
      var theTime2 = 0;// 小时 
      var theTime3 = 0;// 天
      if(theTime > 60) { 
        theTime1 = parseInt(theTime/60); 
        theTime = parseInt(theTime%60); 
        if(theTime1 > 60) { 
        theTime2 = parseInt(theTime1/60); 
        theTime1 = parseInt(theTime1%60); 
        if(theTime2 > 24){
          //大于24小时
          theTime3 = parseInt(theTime2/24);
          theTime2 = parseInt(theTime2%24);
        }
        } 
      } 
      var result = '';
      if(theTime > 0){
        result = ""+parseInt(theTime)+"秒";
      }
      if(theTime1 > 0) { 
        result = ""+parseInt(theTime1)+"分"+result; 
      } 
      if(theTime2 > 0) { 
        result = ""+parseInt(theTime2)+"小时"+result; 
      } 
      if(theTime3 > 0) { 
        result = ""+parseInt(theTime3)+"天"+result; 
      }
      return result; 
    },
    // 提交到oss服务器
    submitFile(){
      this.startLoading()
      const len = this.file.length 
      let uploadLength = 0
      let file = this.file[0];
        let headerInfo = this.random_string(6) + '_' + new Date().getTime() + '.' + file.name.split('.').pop();
        let storeAs = this.getDate() + headerInfo
        // this.client.multipartUpload(storeAs, file, {
        // console.log(file)
        this.client.put(storeAs, file, {
        // 特别说明，这个地方需要设置，不然视频无法用浏览器的方式下载，只能播放。
          headers: { 'Content-Disposition': headerInfo }
        }).then((res) => {
          // console.log(res)
        //  if (uploadLength === len) {
        //     this.endLoading()
        //     this.$message({message: `您成功上传了${len}文件`,type: 'success'});
        //     // 上传成功的后得到阿里云 文件路径， 回调保存到自己服务器中，为下载或者在线播放做下一步操作
        //     this.$emit('uploadDone', this.fileInfo);
        //  }
        //  uploadLength++
        this.fileInfo.url = res.url
        this.fileInfo.name = file.name
        this.fileInfo.size = file.size
        this.fileInfo.time = this.videoDurate[0]
        
        this.endLoading()
          this.$message({message: `您成功上传了${len}文件`,type: 'success'});
          // 上传成功的后得到阿里云 文件路径， 回调保存到自己服务器中，为下载或者在线播放做下一步操作
          this.$emit('uploadDone', this.fileInfo);
          this.disabled = true
          this.file={}
        }).catch((err) => {
          this.endLoading()
          this.$message.error('网络错误，请稍后再试试！')
          this.disabled = true
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
#upload-cp{
  display: flex;
  flex-direction: row;
  align-items: center;
  .file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 0px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    font-size: 16px;
  }
  .file input {
    position: absolute;
    font-size: 16px;
    right: 0;
    top: 0;
    opacity: 0;
    height: 40px;
  }
  .file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
  }
  p{
    font-size: 14px;
    margin-left: 10px;
    span{
      color:red;
    }
  }
  .uploadBtn{
    margin-left: 50px;
  }
}
</style>